<template>
  <div class="app">
    <div class="brand">
      <van-icon name="fire-o" class="icon" />
      <p>饿了么</p>
    </div>
    <div class="inputs">
      <div class="input">
        <myinput
          v-model="user.username"
          placeholder="用户名/手机号"
          msg="用户名/手机号错误"
          :rules="
            /^([\u4E00-\u9FA5A-Za-z]+$)|(^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$)/
          "
          type="text"
        />
        <myinput
          v-model="user.password"
          placeholder="密码"
          msg="密码错误"
          type="password"
        />
      </div>
    </div>
    <div class="button">
      <mybutton type="green" @click="login">
        <span>登录</span>
      </mybutton>
    </div>
  </div>
</template>

<script>
import mybutton from '@/components/mybutton.vue'
import myinput from '@/components/myinput.vue'

import { mapActions } from 'vuex'
export default {
  data() {
    return {
      user: {
        username: '18399999999',
        password: '123456'
      },
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions(['user/mytoken']),
    components: {
      mybutton,
      myinput
    },
    async login(e) {
      if (
        /^(\d{5,6})$|^(1\d{10})$/.test(this.user.username) &&
        /^\S{3,16}$/.test(this.user.password)
      ) {
        await this['user/mytoken'](this.user)
        this.$toast('登录成功')
        this.$router.push({ path: this.redirect || '/' })
      } else {
        this.$toast('电话号或密码错误')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  height: 100vh;
  background-color: #fff;
}
.brand {
  margin-top: 60px;
  margin-left: 25%;
  width: 50%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon {
    font-size: 40px;
    color: #0078d7;
    font-weight: 700;
  }
  p {
    font-size: 40px;
    color: #0078d7;
  }
}
.inputs {
  margin-top: 40px;
  .input {
    margin-left: 6vw;
    padding: 0;
  }
}
.button {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
